<template>
    <div class="sidebar_container">
        <loading :flag="loading"></loading>

        <div class="authorinfo" v-if="!loading&&lists">
            <div class="authorsummay">
                <p class="title">作者</p>
                <router-link :to="{ name: 'user_info',params: { name: 'lists.loginname' }}">
                    <img v-lazy="lists.avatar_url">
                </router-link>
                <router-link :to="{ name: 'user_info',params: { name: 'lists.loginname' }}">
                    {{ lists.loginname }}
                </router-link>
                <span>积分：{{ lists.score }}</span>
            </div>
            <div class="topics">
                <p class="title">作者最近主题</p>
                <ul>
                    <li v-for="item in topicsLimitBy5" :key="item.loginname">
                        <router-link :to="{ name: 'post_content',params: { id: item.id,name: item.author.loginname }}">
                            {{ item.title }}
                        </router-link>
                    </li>
                </ul>
            </div>
            <div class="replies">
                <p class="title">作者最近回复</p>
                <ul>
                    <li v-for="item in lists.recent_replies" :key="item.loginname">
                        <router-link :to="{ name: 'post_content',params: { id: item.id,name: item.author.loginname }}">
                            {{ item.title }}
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import loading from './subcomponents/loading.vue'

export default {
    name: 'sidebar',
    data(){
        return {
            loading: false,
            lists: null
        }
    },
    mounted(){
        this.loading = true
        this.getData()
    },
    methods: {
        getData(){
            this.axios({
                url: `https://cnodejs.org/api/v1/user/${this.$route.params.name}`,
                method: 'get'
            })
            .then(res=>{
                console.log(res)
                if(res.data.success === true){
                    this.lists = res.data.data
                    this.loading = false
                }
            })
        }
    },
    computed: {
        topicsLimitBy5(){
            return this.lists.recent_topics.slice(0,5)
        }
    },
    watch: {
        $route(){
            this.getData()
        }
    },
    components: {
        loading
    }
}
</script>

<style lang="scss" scoped>
    .sidebar_container {
        float: right;
        width: 24%;
        margin-right: 3%;
        padding: 0.8rem 0.4rem;
        box-sizing: border-box;

        .authorinfo {
            background-color: #fff;

            .authorsummay {
                a {
                    display: inline-block;
                    padding: 12px 0 0 6px;
                    vertical-align: top;
                }
                a:nth-child(3) {
                    margin-top: 20px;
                    margin-left: 2px;
                }
                span {
                    display: block;
                    padding: 12px 0 12px 12px;
                    font-size: 0.75rem;
                }
            }
            .topics,
            .replies {
                font-size: 0.72rem;
                border-top: 10px solid  #ddd;
                ul {
                    padding: 10px 0 10px 0;
                    li {
                        padding: 4px 0 0 12px;
                        color: #c0ccda;
                        white-space: nowrap;
                        a {
                            text-overflow: ellipsis;
                            overflow: hidden;
                            max-width: 95%;
                            display: inline-block;
                        }
                    }
                }
            }
        }
        p.title {
            padding: 12px 0 12px 12px;
            background-color: rgba(212,205,205,0.17);
            font-size: 0.75rem;
        }
        a {
            text-decoration: none;
            color: #a8a3a3;
        }
        img {
            width: 3.5rem;
            padding-left: 6px;
            border-radius: 3px;
            display: inline-block;
        }
        li {
            list-style: none;
        }
    }
</style>
